import AppBar from "@material-ui/core/AppBar";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import IconButton from "@material-ui/core/IconButton";
import createStyles from "@material-ui/core/styles/createStyles";
import withStyles, {StyleRules, WithStyles} from "@material-ui/core/styles/withStyles";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import ArrowIeft from "@material-ui/icons/ArrowBack";
import * as React from "react";

const styles: StyleRules = {
  root: {},
};
export interface props extends WithStyles<typeof styles> {
  title: string;
  style?: object;
  url?: string;
  buttonName?: string;
  diplayButton: boolean;
}

const ButtonIf = (url: string, diapaly: boolean, name: string) => {
  if (diapaly === false) {
    return null;
  }
  return (
    <Grid
      container={true}
      item={true}
      xs={3}
      alignItems={"center"}
      justify={"flex-end"}
    >
      <Button variant="contained" size={"small"} href={url || "#"}>
        {name || "按钮"}
      </Button>
    </Grid>
  );
};

class CardHeader extends React.Component<props, object> {
  constructor(props: props) {
    super(props);
  }
  public goBack(): any {
    window.history.back();
  }
  public render() {
    return (
      <AppBar position="static" color="default">
        <Toolbar>
          <Grid container={true}>
            <Grid item={true} xs={3}>
              <IconButton onClick={this.goBack} color="inherit">
                <ArrowIeft />
              </IconButton>
            </Grid>
            <Grid
              container={true}
              item={true}
              xs={6}
              alignItems="center"
              justify={"center"}
            >
              <Typography variant="title" color="inherit">
                {this.props.title || "没有标题"}
              </Typography>
            </Grid>
            {ButtonIf(
              this.props.url || "#",
              this.props.diplayButton,
              this.props.buttonName || "按钮"
            )}
          </Grid>
        </Toolbar>
      </AppBar>
    );
  }
}

export default withStyles(createStyles(styles))(CardHeader);
